<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医生预约</title>
    <link rel="stylesheet" href="doctor_appointment.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container">
    <!-- 顶部导航 -->
    <div class="header">
        <button class="back-btn" onclick="window.location.href='/demo/index/index.html'">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1>医生预约</h1>
        <button class="help-btn">
            <i class="fas fa-question-circle"></i>
        </button>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">

        <i class="fas fa-search"></i>
        <input type="text" placeholder="搜索科室或医生">
    </div>

    <!-- 日期滚动条 -->
    <div class="date-scroll" id="dateScroll">
        <!-- 日期项会在这里动态生成 -->
    </div>

    <!-- 科室快速选择 -->
    <div class="department-section">
        <h2>选择科室</h2>
        <div class="department-grid">
            <div class="department-item active" data-department="心内科">
                <i class="fas fa-heart"></i>
                <span>心内科</span>
            </div>
            <div class="department-item" data-department="神经科">
                <i class="fas fa-brain"></i>
                <span>神经科</span>
            </div>
            <div class="department-item" data-department="骨科">
                <i class="fas fa-bone"></i>
                <span>骨科</span>
            </div>
            <div class="department-item" data-department="口腔科">
                <i class="fas fa-teeth"></i>
                <span>口腔科</span>
            </div>
            <div class="department-item" data-department="眼科">
                <i class="fas fa-eye"></i>
                <span>眼科</span>
            </div>
            <div class="department-item" data-department="内科">
                <i class="fas fa-stethoscope"></i>
                <span>内科</span>
            </div>
        </div>
    </div>

    <!-- 推荐医生列表 -->
    <div class="doctor-list" id="doctorList">
        <!-- 医生卡片会在这里渲染 -->
    </div>

    <!-- 加载 Spinner -->
    <div id="loadingSpinner" class="loading-spinner" style="display:none;">
        <i class="fas fa-spinner fa-spin"></i> 加载中...
    </div>

    <!-- 预约弹窗 -->
    <div class="appointment-modal" id="appointmentModal" style="display:none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>预约就诊</h2>
                <button class="close-btn" id="closeModal"><i class="fas fa-times"></i></button>
            </div>
            <form id="appointmentForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label>医生</label>
                        <p id="modalDoctorName"></p>
                    </div>
                    <div class="form-group">
                        <label>科室/职称</label>
                        <p id="modalDepartment"></p>
                    </div>
                    <div class="form-group">
                        <label>日期</label>
                        <p id="modalDate"></p>
                    </div>
                    <div class="form-group">
                        <label>时间</label>
                        <p id="modalTime"></p>
                    </div>
                    <div class="form-group">
                        <label>就诊事由</label>
                        <textarea id="symptoms" placeholder="请简要描述您的症状或就诊目的"></textarea>
                    </div>
                    <input type="hidden" id="doctorId">
                    <input type="hidden" id="appointmentDate">
                    <input type="hidden" id="appointmentTime">
                </div>
                <div class="modal-footer">
                    <button type="button" class="cancel-btn" id="cancelBtn">取消</button>
                    <button type="submit" class="confirm-btn" id="submitBtn">确认预约</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Toast -->
    <div id="toast" class="toast"></div>
</div>

<script src="doctor_appointment.js"></script>
</body>
</html>

